import { _decorator, Component, Node, Sprite } from 'cc';
import { BaseView } from '../../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { IapProductInfo } from '../../../../../scripts/managers/SDK/IapSDKManager';
import { IapButtonItem } from '../../ShopPanel/IapButtonItem';
import { find } from 'cc';
import { Label } from 'cc';
import { ResourceHelper } from '../../../ResourceHelper';
const { ccclass, property } = _decorator;

@ccclass('CoinItem')
export class CoinItem extends BaseView {

    data = ReactiveProperty.Create<IapProductInfo>(null);

    @property(IapButtonItem)
    iapButtonItem: IapButtonItem = null;

    @property(Sprite)
    iconSprite: Sprite = null;

    useObserves() {
        return [
            this.data.subscribe(this.refresh.bind(this)),
        ];
    }

    refresh() {
        if (this.data.value == null) return;
        let info = this.data.value;

        let countLabel = find('board/count', this.node).getComponent(Label);
        countLabel.string = `${info.provide.coin ?? 0}`;

        this.iconSprite.spriteFrame = ResourceHelper.GetTpTex2Atlas().getSpriteFrame(`coins/coin_${info.iconId}`);

        let iapButtonItem = find('board/btn', this.node).getComponent(IapButtonItem);
        iapButtonItem.data.value = info;
    }

}

